@config.main("Statistics") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <style>

            .anno {
                padding-left: 50px;
                font-size: 1rem;
                font-weight: 501;
                margin-top: 10px;
            }

        #table{
            font-size: 11px;
        }

            .bootstrap-table .fixed-table-container .table thead th .th-inner{
                padding: 5px;
            }

        #table td{
            padding: 3px 3px;
        }

    </style>


    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Statistics")

            <div class="main-body">

                @components.scrollComponents("The distribution of methylation sites in different regions of transcript") {
                    @components.scrollComponents("Cucumber", "20") {
                        <img src="/assets/images/stat/1.jpg" width="100%" />
                        <div class="anno">
                            <table>
                                <tbody>
                                    <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                    <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                    <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                    <tr><td>1-3 #:</td><td>Biological repeat 1-3#;</td></tr>
                                    <tr><td>StartC:</td><td>400bp length range close to the start codon;</td></tr>
                                    <tr><td>StopC:</td><td>400bp length range close to the stop codon;</td></tr>
                                </tbody>
                            </table>
                        </div>
                    }

                    @components.scrollComponents("Pumpkin", "20") {
                        <img src="/assets/images/stat/2.jpg" width="100%" />
                        <div class="anno">
                            <table>
                                <tbody>
                                    <tr><td style="padding-right: 70px">Cm:</td><td>Pumpkin;</td></tr>
                                    <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                    <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                    <tr><td>1-3 #:</td><td>Biological repeat 1-3#;</td></tr>
                                    <tr><td>StartC:</td><td>400bp length range close to the start codon;</td></tr>
                                    <tr><td>StopC:</td><td>400bp length range close to the stop codon;</td></tr>
                                </tbody>
                            </table>
                        </div>
                    }
                }

                @components.scrollComponents("Metagene distribution of methylation sites along transcript lengths") {
                    <div style="text-align: center;
                        width: 100%">
                        <img src="/assets/images/stat/5.jpg" style="width: 700px"/>
                        <img src="/assets/images/stat/6.jpg" style="width: 700px;
                            margin-left: 40px" />
                    </div>
                    <div class="anno">
                        <table>
                            <tbody>
                                <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                            </tbody>
                        </table>
                    </div>
                }

                @components.scrollComponents("Enrichment of methylated transcripts in QTL regions") {
                    <div style="text-align: center;
                        width: 100%">

                        <img src="/assets/images/stat/19.jpg" style="width: unset !important;" />
                        <img src="/assets/images/stat/7.jpg" style="width: 700px;
                            margin-left: 80px" />
                        <img src="/assets/images/stat/8.jpg" style="width: 700px;
                            margin-left: 92px" />
                        <img src="/assets/images/stat/9.jpg" style="width: 700px;
                            margin-left: 87px"/>
                        <img src="/assets/images/stat/10.jpg" style="width: 700px;
                            margin-left: 94px" />
                    </div>

                    <div class="anno">
                        <table>
                            <tbody>
                                <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                            </tbody>
                        </table>
                    </div>

                    <div style="width: 100%">
                        <table class="table table-hover table-bordered" id="table" data-pagination="true" data-advanced-sortable="true"
                        data-show-export="true" data-export-types="['excel','txt']"
                        data-export-data-type="all"
                        data-page-list="[10]">
                            <thead>
                                <tr>
                                    <th data-field="QTL_ID" rowspan="2">QTL ID</th>
                                    <th data-field="Trait" rowspan="2">Trait</th>
                                    <th data-field="chr" rowspan="2">Chr</th>
                                    <th data-field="left" rowspan="2">Left</th>
                                    <th data-field="right" rowspan="2">Right</th>
                                    <th data-field="length" rowspan="2">Length</th>
                                    <th colspan="3" data-align="center">Methylated mRNAs</th>
                                    <th colspan="2" data-align="center">Methylated mRNAs<br/> in whole plant</th>
                                    <th colspan="2" data-align="center">Methylated mRNAs<br/> in vascular extraction</th>
                                    <th colspan="4" data-align="center">mRNAs per 30,000 bp on QTL</th>
                                </tr>
                                <tr>
                                    <th data-field="m5C_methylated_mRNAs">m<sup>5</sup>C</th>
                                    <th data-field="m6A_methylated_mRNAs">m<sup>6</sup>A</th>
                                    <th data-field="total_mRNAs">total</th>
                                    <th data-field="m5C_methylated_mRNAs_in_whole_plant">m<sup>5</sup>C</th>
                                    <th data-field="m6A_methylated_mRNAs_in_whole_plant">m<sup>6</sup>A</th>
                                    <th data-field="m5C_methylated_mRNAs_in_vascular_extraction">m<sup>5</sup>C</th>
                                    <th data-field="m6A_methylated_mRNAs_in_vascular_extraction">m<sup>6</sup>A</th>
                                    <th data-field="Number_of_CsGm5C_mRNAs_per_30,000_bp_on_QTL">CsGm5C</th>
                                    <th data-field="Number_of_CsGm6A_mRNAs_per_30,000_bp_on_QTL">CsGm6A</th>
                                    <th data-field="Number_of_CsVm5C_mRNAs_per_30,000_bp_on_QTL">CsVm5C</th>
                                    <th data-field="Number_of_CsVm6A_mRNAs_per_30,000_bp_on_QTL">CsVm6A</th>

                                </tr>

                            </thead>
                        </table>
                    </div>
                }

                @components.scrollComponents("Relationship between graft-induced mobile transcripts and methylated") {
                    @components.scrollComponents("m<sup>5</sup>C", "20") {
                        <img src="/assets/images/stat/11.jpg" style="width: 500px" />
                        <img src="/assets/images/stat/12.jpg" style="width: 500px" />
                        <div class="anno">
                            <table>
                                <tbody>
                                    <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                    <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                    <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                    <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                </tbody>
                            </table>
                        </div>
                    }

                    @components.scrollComponents("m<sup>6</sup>A", "20") {
                        <img src="/assets/images/stat/13.jpg" style="width: 500px" />
                        <img src="/assets/images/stat/14.jpg" style="width: 500px" />
                        <div class="anno">
                            <table>
                                <tbody>
                                    <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                    <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                    <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                    <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                </tbody>
                            </table>
                        </div>
                    }
                }

                @components.scrollComponents("Ratio of graft-induced mobile transcripts in the methylation population") {
                    <div style="text-align: center;
                        width: 100%">
                        <img src="/assets/images/stat/15.jpg" width="800px" />
                    </div>
                }

                @components.scrollComponents("Ratio of graft-induced mobile transcripts in the methylation population along relative transcript lengths") {
                    <div style="margin-left: 20px">
                        @legend("Population of methylated transcripts", "#E37933")
                        @legend("Population of graft-induced mobile transcripts with methylation", "#5893C9")
                        @legend("Ratio of graft-induced mobile transcripts with methylation", "#585959", "2")
                    </div>
                    <div style="text-align: center;
                        width: 100%">
                        <img src="/assets/images/stat/16-1.jpg" width="500px" />
                        <img src="/assets/images/stat/16-2.jpg" width="500px" style="margin-top: 7px"/>
                        <img src="/assets/images/stat/16-3.jpg" width="500px" style="margin-left: 18px"/>
                        <img src="/assets/images/stat/16-4.jpg" width="500px" style="margin-top: 7px"/>
                    </div>
                    <div class="anno">
                        <table>
                            <tbody>
                                <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                            </tbody>
                        </table>
                    </div>
                }

                @components.scrollComponents("Ratio of graft-induced mobile transcripts with different methylation frequency in the methylation population") {
                    <div style="margin-left: 20px">
                        @legend("Population of transcripts with frequency (1, 2 or  more than 3) methylations", "#E37933")
                        @legend("Population of graft-induced mobile transcripts with frequency (1, 2 or  more than 3) methylations", "#5893C9")
                        @legend("Ratio of graft-induced mobile transcripts with different methylation frequency (1, 2 or  more than 3) in the methylation population", "#585959", "2")
                    </div>
                    <img src="/assets/images/stat/17.jpg" width="100%" />


                    <div class="anno">
                        <table>
                            <tbody>
                                <tr><td style="padding-right: 70px">A(3+):</td><td>
                                    mRNAs with more than 3 (including 3) frequency methylations;</td></tr>
                                <tr><td>B(2):</td><td>mRNAs with 2 frequency methylations;</td></tr>
                                <tr><td>C(1):</td><td>mRNAs with 1 frequency methylation;</td></tr>
                                <tr><td>Cs:</td><td>Cucumber;</td></tr>
                                <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                <tr><td>1-3 #:</td><td>Biological repeat 1-3#;</td></tr>
                            </tbody>
                        </table>
                    </div>
                }

                @components.scrollComponents("The relationship between methylation intensity and graft-induced mobility of mRNAs") {
                    <div style="margin-left: 20px">
                        @legend("Population of transcripts in different methylation intensity", "#8FAADC")
                        @legend("Population of graft-induced mobile transcripts in different methylation intensity", "#5B9BD5")
                        @legend("Ratio of graft-induced mobile transcripts with different methylation intensity", "#585959", "2")
                    </div>
                    <div style="text-align: center;
                        width: 100%">

                        <img src="/assets/images/stat/18-1.jpg" width="500px" />
                        <img src="/assets/images/stat/18-2.jpg" width="500px" />
                        <img src="/assets/images/stat/18-3.jpg" width="500px" />
                        <img src="/assets/images/stat/18-4.jpg" width="500px" />
                    </div>
                    <div class="anno">
                        <table>
                            <tbody>
                                <tr><td style="padding-right: 70px">Cs:</td><td>Cucumber;</td></tr>
                                <tr><td>Cm:</td><td>Pumpkin;</td></tr>
                                <tr><td>V:</td><td>Exudation from vasculature of 20-leaf-old plants;</td></tr>
                                <tr><td>G:</td><td>The mixture of leaf, root and stem from 20-leaf-old plant;</td></tr>
                                <tr><td>1~5:</td><td>Methylation intensity;</td></tr>
                            </tbody>
                        </table>
                    </div>
                }

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/bootstrap-table-export.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/tableExport.min.js")" type ="text/javascript"></script>

    <script>

            $(function () {
                $(".area").click()

                $.post("@routes.HomeController.qtlData()", (data) => {
                    let columns = [[

                        {field: "QTL_ID", title: "QTL ID",  rowspan: 2},
                        {field: "Trait", title: "Trait",  rowspan: 2},
                        {field: "chr", title: "Chr",  rowspan: 2},
                        {field: "left", title: "Left",  rowspan: 2},
                        {field: "right", title: "Right",  rowspan: 2},
                        {field: "length", title: "Length",  rowspan: 2},
                        {title: "Methylated mRNAs",colspan:3,align:"center"},
                        {title: "Methylated mRNAs in whole plant",colspan:2,align:"center"},
                        {title: "Methylated mRNAs in vascular extraction",colspan:2,align:"center"},
                        {title: "mRNAs per 30,000 bp on QTL",colspan:4,align:"center"},
                        ],[
                        {field: "m5C_methylated_mRNAs", title: "m5C" },
                        {field: "m6A_methylated_mRNAs", title: "m6A" },
                        {field: "total_mRNAs", title: "total" },
                        {field: "m5C_methylated_mRNAs_in_whole_plant", title: "m5C" },
                        {field: "m6A_methylated_mRNAs_in_whole_plant", title: "m6A" },
                        {field: "m5C_methylated_mRNAs_in_vascular_extraction", title: "m5C" },
                        {field: "m6A_methylated_mRNAs_in_vascular_extraction", title: "m6A" },
                        {field: "Number_of_CsGm5C_mRNAs_per_30,000_bp_on_QTL", title: "CsGm5C" },
                        {field: "Number_of_CsGm6A_mRNAs_per_30,000_bp_on_QTL", title: "CsGm6A" },
                        {field: "Number_of_CsVm5C_mRNAs_per_30,000_bp_on_QTL", title: "CsVm5C" },
                        {field: "Number_of_CsVm6A_mRNAs_per_30,000_bp_on_QTL", title: "CsVm6A" },
                    ]

                    ]

                    $("#table").bootstrapTable({
                        data: data.data
                    })

                })

            })

    </script>
}

@legend(title: String, color: String, height: String = "15") = {
    <div class="legend-box">
        <div class="legend" style="background-color:  @color;height: @{height}px"> </div>
    <h6>@title</h6>
    </div>
}
